<template>
  <div style="border: 1px solid; padding: 10px;">
    <h4>pinia</h4>
    {{ userStore }}
    <p>name: {{ userStore.name }}</p>
    <p>fullname: {{ userStore.fullname }}</p>
    <p>desc: {{ userStore.fullnameDesc }}</p>

    <p>age: {{ userStore.age }}</p>

    <button @click="ageAdd">age++</button>
    <button @click="editUser">edit user</button>

    <button @click="ageReset">reset</button>
    <button @click="replaceState">replace state</button>

  </div>
</template>

<script setup>
import useUser from '../store/user'

const userStore = useUser()

// 修改state
const ageAdd = () => {
  userStore.age++
}

// 修改多个state
const editUser = () => {
  userStore.$patch({
    name: 'huanghaha',
    age: 56
  })
}

// 重置state
const ageReset = () => {
  userStore.$reset()
}

// 替换state
const replaceState = () => {
  userStore.$state = {
    name: 'edsd',
    addr: 'hangzhou'
  }
}

</script>

<style>
</style>
